import styles from './index.less';
import LazyloadImage from '../components/LazyloadImage'

const NORMAL_IMAGE_URL = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
const ERROR_IMAGE_URL = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUIPnJuuZ.png' 

export default function IndexPage() {
  return (
    <div className={styles.wrapper}>
      <h1 className={styles.title}>图片懒加载</h1>
      <h4>视窗内直接加载</h4>
      <div className={styles.inscreen}>
        {/* 能正常加载的图片 */}
        <LazyloadImage 
          src={NORMAL_IMAGE_URL}
        />
        {/* 不能正常加载的图片 */}
        <LazyloadImage 
          src={ERROR_IMAGE_URL}
        />
      </div>
      <h4>视窗外滚动到了再加载</h4>
      {/* 屏幕外的图片 需要滚动到再加载 */}
      <div className={styles.outscreen}>
        <LazyloadImage 
          src={NORMAL_IMAGE_URL}
        />
        <LazyloadImage 
          src={ERROR_IMAGE_URL}
        />
      </div>
    </div>
  );
}
